<template>
  <div class="map-data">
    <el-form ref="customizedParams" :model="customizedParams" :inline="true" size="small" :rules="rules" class="data-form">
      <div class="title"><img src="../../public/image/icon.png" alt="" width="15px" style="margin-right: 10px" /> 数据定制</div>
      <div class="flex" style="padding: 10px 0">
        <div class="map" v-if="customizedParams.showType == 1 || customizedParams.showType == 2" >
          <div :class="iframeStatus ? 'mapbg' : 'padbg'" >
            <div :class="iframeStatus ? 'iframeFalse ' : 'iframeTrue'">
              <wizMap ref="wizmapMe" v-if="wizmapStatus" :mapId="mapId" @handlerMapChane="handlerMapChane"></wizMap>
              <div class="full-screen" size="small" v-if="iframeStatus" @click="iframeClick(false)"><img src="../../public/image/mapButton.png" alt="" width="14px" style="margin: 2px 5px 0 0" /> 区域选择</div>
            </div>
          </div>

          <!-- <div v-if="customizedParams.showType == 3">
            <el-select v-model="weiixng" placeholder="请选择" style="width: 200px" value-key="series_name" @change="weixingChange">
              <el-option v-for="item in weixingOptions" :key="item.key" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div> -->
        </div>
        <!-- 地图右侧内容 -->
        <div class="flex-1 flex flex-c" >
          <div>
              <div style="background-color: #FBFCFF;">
                <div class="steps"><div><span></span>订阅数据时间</div></div>
                <div class="flex" style="height: 55px;">
                  <div style="display: flex; align-items: center;padding-left: 10px;">
                      <el-radio v-model="customizedParams.timetype" :label="1" @change="fileListInifRadioChange">长期</el-radio>
                      <el-radio v-model="customizedParams.timetype" :label="2" @change="fileListInifRadioChange">时间范围</el-radio>
                  </div>
                  <div style="display: flex; align-items: center;padding-left: 10px;">
                    <div v-show="customizedParams.timetype == 2" class="flex time-type">
                        <el-form-item label="开始时间：" label-width="80px" class="flex-1" style="margin: 0;">
                          <el-date-picker v-model="customizedParams.startime" type="date" placeholder="选择日期" style="width: 160px" value-format="yyyy-MM-dd" @change="(val) => timeChange(val)"> </el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束时间：" label-width="80px" class="flex-1" style="margin: 0;">
                          <el-date-picker v-model="customizedParams.endtime" type="date" placeholder="选择日期" style="width: 160px" value-format="yyyy-MM-dd" @change="(val) => timeChange(val)"> </el-date-picker>
                        </el-form-item>
                    </div>
                  </div>
                </div>
              </div>
              <div v-for="(item, index) in stepsList" :key="index +'steps'" class="flex-1" style="margin-top: 10px;background-color: #FBFCFF;">
                  <div class="steps">
                      <div><span></span>{{ item }}</div>
                      <el-checkbox v-model="stepsListCheckbox[index]" :key="index + 'q'" @change="(val) => qxChange(val, item)">全选</el-checkbox>
                  </div>
                  <div v-for="(pitem, pindex) in partListSteps" :key="pindex + 'ps'">
                    <template v-if="pitem.hasOwnProperty(myHeadName)">
                      <div v-for="(citem, cindex) in Object.keys(pitem[myHeadName])" :key="cindex + 'ste'">
                        <template v-if="citem == item">
                          <el-checkbox-group v-model="customizedParams.jsonDate[citem]" :key="citem + 'k'">
                                <div v-for="(row, rindex) in pitem[myHeadName][citem]" :key="rindex + 'che'">
                                    <el-checkbox :label="row.name" name="type" @change="(val) => checkboxChange(val, row, citem, index)">
                                      {{ row.name }}
                                    </el-checkbox>
                                    <!-- <template v-if="row.name.length > 8">
                                      <el-tooltip effect="dark" :content="row.name" placement="top-end"  >
                                          <el-checkbox :label="row.name" name="type" @change="(val) => checkboxChange(val, row)"></el-checkbox>
                                      </el-tooltip>
                                    </template>
                                    <template v-else>
                                      <el-checkbox :label="row.name" name="type" @change="(val) => checkboxChange(val, row)"></el-checkbox>
                                    </template> -->
                                </div>
                          </el-checkbox-group>
                        </template>
                      </div>
                    </template>
                  </div>
              </div>
          </div>
        </div>
      </div>
      <div class="title"><img src="../../public/image/icon.png" alt="" width="15px" style="margin-right: 10px" /> 数据订阅</div>
      <div style="padding: 10px">
        <el-tabs v-model="customizedParams.datatype" style="height: 300px; padding: 0 20px">
          <el-tab-pane label="军综网" name="1" >
            <div class="flex">
              <el-form-item label="FTP地址：" label-width="100px" class="flex"  prop="ipaddr">
                <el-input v-model="customizedParams.ipaddr" placeholder="请输入FTP地址" style="width: 300px"></el-input>
              </el-form-item>
              <el-form-item label="端口号：" label-width="100px" class="flex"  prop="protno">
                <el-input v-model="customizedParams.protno" placeholder="请输入端口号" style="width: 300px"></el-input>
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="用户名：" label-width="100px" class="flex "  prop="account">
                <el-input v-model="customizedParams.account" placeholder="请输入用户名" style="width: 300px" :autocapitalize="false"></el-input>
              </el-form-item>
              <el-form-item label="密码：" label-width="100px" class="flex"  prop="password">
                <el-input type="password" v-model="customizedParams.password" style="width: 300px" show-password placeholder="请输入密码" :autocapitalize="false"></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="路径：" label-width="100px" class="flex"  prop="url" style="width: 100%">
                <div class="flex">
                  <el-input v-model="customizedParams.url" placeholder="请输入路径"  style="width: 300px"></el-input>
                  <span class="text" style="margin-left: 20px">提示：请提前创建该目录，并确保FTP帐号对此目录具有写权限</span>
                </div>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="指挥专网" name="2" >
            <div>
              <el-form-item label="请提供长报文服务地址：" label-width="200px" class="flex" prop="lmsa">
                <el-input v-model="customizedParams.lmsa" placeholder="请输入请提供长报文服务地址" style="width: 300px"></el-input>
              </el-form-item>
              <el-form-item label="接收端路径：" label-width="200px" class="flex" prop="lmasurl">
                <el-autocomplete v-model="customizedParams.lmasurl" :fetch-suggestions="querySearch" @select="handleSelect" placeholder="请输入接收端路径">
                </el-autocomplete>
                <!-- <el-select v-model="customizedParams.lmasurl"  placeholder="请选择" @change="lmasurlChange" style="width: 200px">
                  <el-option v-for="item in optionsList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select> -->
                <span class="text" style="margin-left: 10px">提示：请确保在接收端提前创建该目录</span>
                <!-- <div class="flex" v-if="lmasurlStatus" style="margin-top: 20px">
                  <el-input v-model="addLmasurl" placeholder="请输入接收端路径" style="width: 200px; margin-right: 10px"></el-input>
                  <el-button type="primary" @click="addLmasurlClick">确认</el-button>
                </div> -->
              </el-form-item>
              <div class="text">
                <div style="padding-left: 35px">
                  <p>提示：</p>
                  <p>请接收端安装气象水文软件端包（数据接收软件和数据处理软件）</p>
                  <p>并配置安防系统开放开发送端长报文服务地址： 1.199.16.40/41/65/66，端口：5555、5556</p>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>
  </div>
</template>

<script>
import wizMap from "@/components/wizMap/wizMap.vue";

export default {
  name: "mapData",
  components: {
    wizMap,
  },
  props:{
    mapId: {
      type: String,
      default: "mapId",
    }
  },
  data() {
    return {
      iframeStatus: true,
      wizmapStatus: false,
      dialogVisible: false,
      addLmasurl: "",
      partListSteps: [],
      stepsList: [],
      stepsListCheckbox: [],
      customizedParams: {
        datatype: '1', // 1 军综网  2 指挥专网
        showType: '1', // 1 站点数据  2格点数据 3卫星数据 4 测绘数据
        range: "地图选择", 
        scope: "", // 范围
        // type: 1, //1气象数据 2测绘数据
        timetype: 1,
        isexamine: 1, //1未审核 2审核通过 3审核拒绝
        dataViewName: "",
        jsonDate: {
          dataViewName: '',
          dataView: "", // 表头数据
          mapPosition: "", // 地图数据
          '订阅数据时间': ['长期'],
        },
        fileid: "",
        datelong: "",
        account: "user",
        password: "user",
        protno: "21",
        url: "/data",
        ipaddr: "21.17.240.181",
        filename: "",
        startime: "",
        endtime: "",
        crearetime: "",
        lmsa: "",
        lmasurl: "",
      },
      mapdataBakView: {},
      yaosuValue: [],
      yaosuName: {},
      yaosuObj: {},
      siteOptions: [],
      weixingOptions: [],
      weiixng: {
        series_name: "",
        satellites: [],
      },
      optionsList: [
        { label: "/RecvData/fub", value: "/RecvData/fub" },
        { label: "/RecvData/htb", value: "/RecvData/htb" },
        { label: "/RecvData/grib", value: "/RecvData/grib" },
        { label: "/RecvData/hyz", value: "/RecvData/hyz" },
        { label: "/RecvData/kj", value: "/RecvData/kj" },
        { label: "/RecvData/kjsk", value: "/RecvData/kjsk" },
        { label: "/RecvData/ldsw", value: "/RecvData/ldsw" },
        // { label: "新建目录", value: "add" },
      ],
      listObjectStatus: false,
      lmasurlStatus: false,
      myHeadName: '',
      rules: {
        lmsa: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "" && this.customizedParams.datatype == 2) {
                callback(new Error("请输入请提供长报文服务地址"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        lmasurl: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "" && this.customizedParams.datatype == 2) {
                callback(new Error("请输入接收端路径"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        account: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "" && this.customizedParams.datatype == 1) {
                callback(new Error("请输入用户名"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        url: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "" && this.customizedParams.datatype == 1) {
                callback(new Error("请输入路径"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "" && this.customizedParams.datatype == 1) {
                callback(new Error("请输入输入密码"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        ipaddr: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "" && this.customizedParams.datatype == 1) {
                callback(new Error("请输入FTP地址"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        protno: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "" && this.customizedParams.datatype == 1) {
                callback(new Error("请输入端口号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    }
  },
  watch:{
    
    myHeadName(name){
      // let id = this.$store.getters.menuItem.id
      // this.dataPartList(id)
      // this.mapdataBakView = {}
      this.wizmapStatus = false
      this.initData()
    }
  },
  created(){
    // let id = this.$store.getters.menuItem.id
    // this.dataPartList(id)
  },
  mounted() {
    // this.dataPartList()
  },
  methods: {
    // 初始化
    initData(){
        // this.customizedParams.timetype = 1;
        // this.customizedParams.startime = "";
        // this.customizedParams.endtime = "";
        // this.mapdataBakView = {}
        this.stepsList = []
        this.partListSteps.forEach((item) => {
          if (item.hasOwnProperty(this.myHeadName)) {
            this.stepsList = Object.keys(item[this.myHeadName]);
          }
        });
        this.stepsList.forEach((item,index) => {
          this.stepsListCheckbox[index] = false
          this.$set(this.customizedParams.jsonDate, item, []);
          this.$set(this.yaosuName, item, []); // 保存valueName
          this.$set(this.yaosuObj, item, []); // 保存valueName
        });
        
        if (this.customizedParams.showType != 3) {
            this.wizmapStatus = false
            this.$nextTick(() => {
                this.wizmapStatus = true
                  setTimeout(() => {
                    console.log(this.myHeadName, 'this.myHeadName');
                    this.$refs.wizmapMe.getJsonAllSta(this.myHeadName)
                    this.$refs.wizmapMe.getJsonAllSite()
                    this.$refs.wizmapMe.mapData.showtype = this.customizedParams.showType
                  },100)
            });
        }
        
    },
    // 反显编辑
    dataEdit(data){
        // 加载地图
        var obj = {
            mapView: [[105, 36], 3],
            isShowPane: this.iframeStatus,
            paneType: 1,
            showtype: data.showType, // 1 站点数据  2格点数据 3卫星数据 4 测绘数据
            jwdfw: [
              [140, 0],
              [70, 0],
              [70, 60],
              [140, 60],
            ],
            bakView: data.jsonDate.mapPosition,
          };
          this.mapdataBakView = JSON.parse(JSON.stringify(data.jsonDate.mapPosition)) 
          console.log(data, '======data');

          this.customizedParams = {...data}
          setTimeout(() => {
            
            if (data.showType != 3){
              this.$refs.wizmapMe.mapData = obj
            }
            this.yaosuName = this.customizedParams.jsonDate.yaosuName
            this.yaosuObj = this.customizedParams.jsonDate.yaosuObj
             // 加载要素列表
            this.stepsList.forEach((item, index) => {
                this.customizedParams.jsonDate[item] = this.customizedParams.jsonDate.yaosuName[item]
                // qxChangeNum
                this.stepsListCheckbox[index] = this.qxChangeNum(item) == this.customizedParams.jsonDate.yaosuName[item].length
            })
          },300)
       
          // console.log(this.customizedParams, this.stepsList, 'mapData-反显编辑');
        
    },
    // 获取要素列表
    dataPartList(id, rejectFn) {
      // let id = this.$store.getters.menuItem.id
      this.$http.post(`/fileList/part/list?id=${id}`).then((res) => {
          if (res.code == 200) {
            this.partListSteps = res.data || [];
            if (rejectFn){
              rejectFn(true)
            }
          } else {
            this.$message.error(res.message)
          };
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    // 地图放大
    iframeClick( iframeStatus ) {
      this.iframeStatus = iframeStatus;
      if (this.iframeStatus) {
        var obj = {
          mapView: [[105, 36], 3],
          isShowPane: this.iframeStatus,
          paneType: false,
          showtype: this.customizedParams.showType, //1 不带测绘  2测绘数据
        };
      } else {
        var obj = {
          mapView: [[105, 36], 4],
          isShowPane: this.iframeStatus,
          paneType: 1,
          showtype: this.customizedParams.showType, // 1 站点数据  2格点数据 3卫星数据 4 测绘数据
          jwdfw: [
            [140, 0],
            [70, 0],
            [70, 60],
            [140, 60],
          ],
          bakView: JSON.parse(JSON.stringify(this.mapdataBakView)),
        };
      }
      // // this.mapDataParams = obj
      this.$refs.wizmapMe.mapData = obj;
    },
    timeChange(val, item, index) {
      this.customizedParams.jsonDate["订阅数据时间"][0] = `${this.customizedParams.startime} - ${this.customizedParams.endtime}`;
    },
     // 地图确认按钮
     handlerMapChane(data) {
      console.log(data, "handlerMapChane");
      if(data.close){
          this.customizedParams.jsonDate["mapPosition"] = {
            ...data.mapData,
          };
          this.mapdataBakView = data.mapData
      
          if (this.customizedParams.showType == 1){
            if (data.mapData.hasOwnProperty("tableData")){
              let scope  = [...new Set(data.mapData.tableData.map(item => item.area2))]
              this.customizedParams.scope = scope.join(',')
            }
          }

          if (this.customizedParams.showType == 2){
            if (data.mapData.hasOwnProperty("tableData")){
              let scope  = [...new Set(data.mapData.tableData.map(item => item.area6))]
              this.customizedParams.scope = scope.join(',')
            }
          }
        }
      // 地图取消
      if(!data.close){
        this.wizmapStatus = false
        let obj = {
          mapView: [[105, 36], 3],
          isShowPane: true,
          paneType: 1,
          showtype: this.customizedParams.showType, // 1 站点数据  2格点数据 3卫星数据 4 测绘数据
          jwdfw: [
            [140, 0],
            [70, 0],
            [70, 60],
            [140, 60],
          ],
          bakView: this.mapdataBakView,
        };
        this.$nextTick(() => {
          this.wizmapStatus = true
          setTimeout(() => {
            this.$refs.wizmapMe.mapData = obj;
          },10)
        })
      }
    
      // 地图取消
      if (data.hasOwnProperty("close")) {
        this.iframeClick(true);
      }
    },
    querySearch(querySearch, cb){
      let  optionsList = [
        { address: "/RecvData/fub", value: "/RecvData/fub" },
        { address: "/RecvData/htb", value: "/RecvData/htb" },
        { address: "/RecvData/grib", value: "/RecvData/grib" },
        { address: "/RecvData/hyz", value: "/RecvData/hyz" },
        { address: "/RecvData/kj", value: "/RecvData/kj" },
        { address: "/RecvData/kjsk", value: "/RecvData/kjsk" },
        { address: "/RecvData/ldsw", value: "/RecvData/ldsw" },
        // { label: "新建目录", value: "add" },
      ]
      let results = querySearch ? optionsList.filter((item) => (item.value).toLowerCase().indexOf(querySearch.toLowerCase()) > -1) : optionsList
      cb(results)
    },
    // 输入选择框
    handleSelect(item){
      this.customizedParams.lmasurl = item.value
    },
    lmasurlChange(path) {
      if (path == "add") {
        this.lmasurlStatus = true;
        this.customizedParams.lmasurl = "";
      } else {
        this.lmasurlStatus = false;
      }
      // this.fileListInif.iframeData = path
    },
    addLmasurlClick() {
      this.customizedParams.lmasurl = this.addLmasurl;
      this.optionsList.splice(this.optionsList.length - 1, 0, { label: this.addLmasurl, value: this.addLmasurl });
      this.lmasurlStatus = false;
      this.addLmasurl = "";
    },
    // 复选框change事件
    checkboxChange(val, row, keyName, idnex){
        // console.log(val, row, keyName, '复选框change事件');
        if (val){
          // this.yaosuValue.push(row.value)
          this.yaosuObj[keyName].push(row)
          this.yaosuName[keyName].push(row.name)
        } else {
          // this.yaosuValue.splice(this.yaosuValue.indexOf(row.value), 1)
          this.yaosuObj[keyName].forEach((item, index) => {
            if (item.value == row.value && item.name == row.name)
            this.yaosuObj[keyName].splice(index, 1)
          })
          this.yaosuName[keyName].splice(this.yaosuName[keyName].indexOf(row.name), 1)
        }
        this.stepsListCheckbox[idnex] = this.qxChangeNum(keyName) == this.yaosuName[keyName].length
    },
    // 卫星
    weixingChange(val) {
      this.stepsList = val.satellites.map((item) => {
        return item.name;
      });
      // this.stepsName = val.satellites[0];
      this.stepsList.forEach((item) => {
        this.customizedParams.jsonDate[item] = [];
      });
    },
    // 时间范围选择 长期、时间范围
    fileListInifRadioChange() {
      if (this.customizedParams.timetype == 1) {
        this.customizedParams.startime = "";
        this.customizedParams.endtime = "";
      }
    },
    qxChangeNum(rowItem){
      let objFled = this.partListSteps.find((item) => {
        return Object.keys(item)[0] == this.myHeadName;
      });
      let arr = objFled[this.myHeadName][rowItem].map(item => item.name)
      return arr.length
    },
    // 全选
    qxChange(val, item) {
      let objFled = this.partListSteps.find((item) => {
        return Object.keys(item)[0] == this.myHeadName;
      });
      if (val){
        this.customizedParams.jsonDate[item] = objFled[this.myHeadName][item].map(item => item.name)
        this.yaosuName[item] = objFled[this.myHeadName][item].map(item => item.name)
        this.yaosuObj[item].concat(objFled[this.myHeadName][item])
      } else {
        this.customizedParams.jsonDate[item] = []
        this.yaosuName[item] = []
        this.yaosuObj[item] = []
      }
      
    },
    // 提交数据
    dataSave(){
      let data = { ...this.customizedParams };
      let validateStatus = false
      if (this.customizedParams.timetype == 2 ){
          if (!this.customizedParams.startime || !this.customizedParams.endtime) {
            this.$message.error("请选择开始时间和结束时间");
            return
          }
        }
        // 判断是否选择要素
        validateStatus = this.stepsList.every((item) => {
          if (data.jsonDate[item].length > 0) {
            return true;
          } else {
            this.$message.error(`请选择 ${item}`);
            return false;
          }
      });
      let dataParams = {}
      if (validateStatus) {
        this.$refs["customizedParams"].validate((valid) => {
          if (valid) {
            data.dataViewName = this.myHeadName;
            data.jsonDate.yaosuName = this.yaosuName
            data.jsonDate.yaosuObj = this.yaosuObj
            this.dialogVisible = true;
            dataParams.dataView = data
            dataParams.mapData = {
                mapView: [[105, 36], 3],
                isShowPane: this.iframeStatus,
                // dataView: this.dataView,
                paneType: 1,
                showtype: this.customizedParams.showType,
                jwdfw: [
                  [140, 0],
                  [70, 0],
                  [70, 60],
                  [140, 60],
                ],
                bakView: data.jsonDate.mapPosition,
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
      return dataParams
    },
    // 重置
    resetClick() {
      this.customizedParams = {
        datatype: '1', // 1 军综网  2 指挥专网
        showType: '1', // 1 站点数据  2格点数据 3卫星数据 4 测绘数据
        range: "地图选择", 
        scope: "", // 范围
        // type: 1, //1气象数据 2测绘数据
        timetype: 1,
        isexamine: 1, //1未审核 2审核通过 3审核拒绝
        dataViewName: "",
        jsonDate: {
          dataViewName: '',
          dataView: "", // 表头数据
          mapPosition: "", // 地图数据
          '订阅数据时间': ['长期'],
        },
        fileid: "",
        datelong: "",
        account: "",
        password: "",
        protno: "",
        url: "",
        ipaddr: "",
        filename: "",
        startime: "",
        endtime: "",
        crearetime: "",
        lmsa: "",
        lmasurl: "",
      };
      this.$refs.customizedParams.resetFields()
      // this.yaosuValue = []
      this.stepsList = []
      this.yaosuObj = {}
      this.partListSteps.forEach((item) => {
        if (item.hasOwnProperty(this.myHeadName)) {
          this.stepsList = Object.keys(item[this.myHeadName]);
        }
      });
      this.stepsList.forEach((item) => {
        this.$set(this.customizedParams.jsonDate, item, []);
        // this.$set(this.yaosuValue, item, []); // 保存value
        this.$set(this.yaosuName, item, []); // 保存valueName
        this.$set(this.yaosuObj, item, []); // 保存row
      });
      this.wizmapStatus = false
      this.$nextTick(() => {
          this.wizmapStatus = true
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.map-data {
  .steps {
    width: 100%;
    color: #333333;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    background: #FBFCFF;
    border: 1px solid #F6F6F6;
    padding: 3px 8px;
    >div{
      display: flex;
      align-items: center;
    }
    span{
      display: inline-block;
      width: 3px;
      height: 100%;
      background-color: #FF9D02;
      margin-right: 10px;
    }
  }
  .title {
    font-size: 14px;
    padding: 0 10px;
    height: 35px;
    font-weight: bold;
    // background-color: #f2f6fc;
    display: flex;
    align-items: center;
    background-image: url(../../public/image/title-bg.png);
    background-size: 100% 100%;
  }
  .mapbg{
    background-image: url(../../public/image/ditubg.png);
    background-size: 100% 100%;
    padding: 5px;
  }
  .map {
    width: 350px;
    height: 300px;
    position: relative;
    margin-right: 10px;
    .full-screen {
      position: absolute;
      bottom: 10px;
      right: 10px;
      font-size: 12px;
      z-index: 9;
      background-color: #e7e7e7;
      padding: 5px 10px;
      color: #377ffd;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .site-list {
      width: auto;
      padding: 10px;
      margin-bottom: 3px;
      background-color: #f3f8fc;
    }
  }
  .iframeFalse {
    width: 350px;
    height: 300px;
  }
  .iframeFalse1 {
    width: 845px;
    height: 500px;
  }
  .iframeTrue {
    margin: 0;
    padding: 13px;
    border: 0;
    position: fixed;
    top: 5vh;
    left: 10vw;
    width: 80vw;
    height: calc(100vh - 80px);
    z-index: 1000;
    background-color: #fff;
    background: url("~@/assets/images/tanchudi.png") no-repeat;
    background-size: 100% 100%;
  }
  .text {
    color: #606266;
    font-size: 14px;
  }

  .padbg {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    z-index: 1000;
  }
  .time-type{
    ::v-deep .el-form-item__label{
      font-size: 12px;
    }
    ::v-deep .el-input__prefix{
      display: none;
    }
    ::v-deep .el-input--prefix .el-input__inner{
      padding-left: 10px;

    }
  }
}
::v-deep .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    >div{
      display: flex;
      width: 160px;
    }
    .el-checkbox {
      flex: 1;
      text-align: left;
      font-size: 12px;
      // margin: 10px 10px 0 10px;
      padding: 10px;
      overflow: hidden;
      display: flex;
      align-items: center;
      white-space: wrap;
    }
  }
  ::v-deep .el-form-item__content {
    flex: 1;
  }
  ::v-deep .el-radio{
    line-height: normal;
  }
</style>
